<template>
  <!--pages/common/components/productBox/productBox.wxml-->

  <view class="product_list_box">
    <view class="product_list">
      <view
        v-for="(item, index) in productList"
        :key="index"
        class="pro_desc"
      >
        <view class="pro_img_box">
          <image
            :src="item.cover_image "
            :lazy-load="true"
            class="pro_img"
            :data-index="index"
          ></image>
        </view>
        <view class="product_intrduce_box">
          <view class="product_name">
            <view class="product_title"
              ><image
                class="p"
                :src="'/static/order/' + item.platform + '.png'"
              ></image
              >{{ item.goods_title }}</view
            >
          </view>
          <view class="store_left1" v-if="item.mch_name">
            <image
              class="store_img1"
              src="/static/index/fangzi.png"
            ></image>
            <view class="store_name1">{{ item.mch_name }}</view>
          </view>
          <view class="card_box1">
            <!--  默认就直接显示所有情况优惠券， 最低消费先不考虑 -->
            <!-- <view class="discounts_card1" wx:if="{{item.coupon_price>0&&item.coupon_min_avaliable > item.zk_price}}">
                        <image class="discounts_card_img1" src="/images/index/discounts_card_img.png"></image>
                        <view class="discounts_card_num1">券 ¥{{item.coupon_price}}元,满{{item.coupon_min_avaliable}}  </view>
                    </view> -->

            <view
              class="discounts_card1"
              v-if="
                item.coupon_price > 0 &&
                item.coupon_min_avaliable <= item.zk_price
              "
            >
              <image
                class="discounts_card_img1"
                src="/static/images/index/discounts_card_img.png"
              ></image>
              <view class="discounts_card_num1"
                >券 ¥{{ item.coupon_price }}元
              </view>
            </view>

            <view class="back_money1" v-if="item.sale_commission > 0"
              >返 ¥{{ item.sale_commission }}</view
            >
          </view>
          <!--  <view class="real_money1">¥{{numberUtil.numberFixed(item.zk_price-(item.coupon_min_avaliable<item.zk_price?item.coupon_price:0))}}-->
          <view class="real_money1">
            <view v-if="item.qh_price <= 0">¥{{ item.zk_price }}</view>
            <view v-else>¥{{item.price2 }} </view>
            <view class="price_box1">
              <view
                class="histroy_money1"
                v-if="item.coupon_price > 0 && item.qh_price > 0"
              >
                ¥{{ item.zk_price }}</view
              >
              <view
                class="histroy_money1"
                v-if="item.coupon_price == 0 && item.zk_price != item.price"
              >
                ¥{{ item.price }}</view
              >
            </view>
            <!--   data-item="{{item}}"   data-index="{{index}}" -->
            <view
              class="addtolive"
              :disabled="item.disabled"
              v-if="isLive == 1"
              @tap.stop="add_live(item, index)"
            >
              {{ item.is_selected ? "已添加" : "+直播" }}
            </view>
            <!--只有从发品助手过来才会出现此按钮-->
            <view
              class="addtolive"
              :disabled="item.disabled"
              v-if="isFapin"
              @tap.stop="add_fapin(item, index)"
            >
             确定选品
            </view>
            <!-- 新加的-->
            <view
              class="coupon_info_clz"
              v-if="
                item.coupon_info && item.zk_price < item.coupon_min_avaliable
              "
              ><text v-if="item.coupon_price > 0">{{
                item.coupon_info
              }}</text></view
            >
          </view>

          <view class="product_bottom1">
            <view class="store_right" v-if="item.comments > 0">
              <view class="sale_box1 sale_box"
                >评论 <text class="sale_num">{{ item.comments }}</text></view
              >
            </view>
            <view
              class="store_right1"
              v-if="item.thirty_days_total_sales_volume > 0"
            >
              <view class="sale_box1"
                >已售
                <text class="sale_num1"
                  >{{ item.thirty_days_total_sales_volume }}件</text
                ></view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
var app = getApp();
// import { saveGoodsToLive, goods_to_select } from "../../../../utils/imapi";
import { formatDate } from "../../utils/util";
export default {
  data() {
    return {};
  },

  components: {},
  props: {
    productList: {
      type: Array,
      default: [],
    },
    showTitle: Boolean,
    isLive: String,
    isFapin: Boolean,
    bizcode: String,
  },
  watch: {
    productList: {
      handler: function (newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
        if (!oldVal || !oldVal[0]) return;

        for (var i = 0; i < oldVal.length; i++) {
          if (
            newVal[i] &&
            oldVal[i] &&
            newVal[i].item_id == oldVal[i].item_id
          ) {
            newVal[i] = oldVal[i];
          }
        }
        this.productList = newVal;
      },
      immediate: true,
      deep: true,
    },
  },

  mounted() {},

  methods: {


    add_live(item, index) {
      console.log(1111111111111111111);
      // 添加到直播间
      const i = index;
      console.log(i);
      // this.productList[i].is_selected=true
      // this.setData({
      //   productList:this.productList
      // })
      console.log(this.productList);
      var that = this;
      let p = item.p;
      let item_id = item.item_id;
      let title = item.title;
      let s = "把" + p + " 上 " + title + "添加到直播间吗?";
      uni.showModal({
        title: "加入直播间?",
        content: s,
        success: async function (res) {
          if (res.confirm) {
            try {
              uni.showLoading({
                icon: "none",
                title: "正在添加商品，请稍后",
              });
              // 调用添加到g_goods 并提审
              const data = await saveGoodsToLive({
                p: p,
                item_id: item_id,
              });

              console.log(data);
              //  确定加入
              uni.showToast({
                icon: "none",
                title: "5分钟后 商品管理查看审核状态",
                duration: 3000,
              });
              //  that.productList[i].is_selected=true
              //  that.productList[i].disabled=true
              that.$set(that.productList[i], "is_selected", true);
              that.$set(that.productList[i], "disabled", true);
              that.$forceUpdate();
              //  uni.hideLoading({})
              return;
            } catch (err) {
              console.log(err);
              if ((err = "直播商品已添加")) {
                // that.productList[i].is_selected=true
                // that.productList[i].disabled=true
                that.$set(that.productList[i], "is_selected", true);
                that.$set(that.productList[i], "disabled", true);
                that.$forceUpdate();
                return;
              }
              uni.showToast({
                icon: "none",
                title: "商品未添加成功",
              });
            }
          } else {
            uni.showToast({
              title: "再看看其他宝贝",
            });
          }
        },
      });
    },
    add_fapin(item, index) {
      this.$emit('choose_bargin',item)
    },
  },
};
</script>
<style>
/* pages/common/components/productBox/productBox.wxss */
.product_list_box {
  width: 100%;
}
.product_list_title {
  width: 100%;
  height: 116upx;
  font-size: 30upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(10, 8, 25, 1);
  text-align: center;
  line-height: 116upx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.star {
  width: 34upx;
  height: 22upx;
}
.star_title {
  margin: 0 20upx;
}
.product_list {
  padding: 0 30upx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pro_desc {
  position: relative;
  width: 336upx;
  background-color: #ffffff;
  border-radius: 16upx;
  overflow: hidden;
  margin-bottom: 20upx;
}
.pro_img_box {
  position: relative;
  width: 336upx;
  height: 336upx;
}
.pro_img {
  position: absolute;
  left: 0upx;
  top: 0upx;
  width: 336upx;
  height: 336upx;
  display: block;
  border-radius: 16upx 16upx 0 0;
  transition: all 0.8s;
}
.load_img {
  z-index: 12;
  opacity: 1;
}
.hide_load {
  opacity: 0;
}
.product_intrduce_box {
  display: flex;
  flex-direction: column;
  padding: 16upx 10upx;
}
.p {
  width: 28upx;
  height: 28upx;
  margin-right: 5upx;
}
.product_name {
  display: flex;
  align-items: center;
}
.product_title {
  font-size: 24upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(10, 8, 25, 1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.store_left1 {
  padding: 6upx;
  display: flex;
  align-items: center;
}
.store_img1 {
  width: 20upx;
  height: 20upx;
  margin-right: 5upx;
}
.store_name1 {
  font-size: 20upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  width: 180upx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.card_box1 {
  display: flex;
  padding: 10upx 0;
  width: 100%;
  height: 60upx;
}
.discounts_card1 {
  position: relative;
  width: 100upx;
  height: 36upx;
  text-align: center;
  line-height: 36upx;
  font-size: 20upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-right: 20upx;
}
.discounts_card_img1,
.discounts_card_num1 {
  position: absolute;
  width: 100upx;
  height: 36upx;
  left: 0;
  top: 0;
}
.back_money1 {
  width: 116upx;
  height: 36upx;
  background: #f95a4b;
  font-size: 20upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 36upx;
  border-radius: 10upx;
}
.price_box1 {
  display: flex;
  height: 36upx;
}
.real_money1 {
  font-size: 36upx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #f95a4b;
  margin-right: 10upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.histroy_money1 {
  font-size: 20upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(157, 156, 163, 1);
  text-decoration: line-through;
  height: 30upx;
}
.product_bottom1 {
  display: flex;
  justify-content: space-between;
}
.sale_box1 {
  font-size: 20upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(157, 156, 163, 1);
  height: 30upx;
}
.sale_box {
  width: 100upx;
  white-space: nowrap;
  text-align: right;
}
.sale_num1 {
  font-size: 20upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f95a4b;
}
.store_right1 {
  align-items: flex-end;
  display: flex;
}
.pro_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0upx;
  top: 0upx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 13;
  opacity: 0;
  transition: all 0.4s;
}
.like_btn {
  width: 180upx;
  height: 56upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 30upx;
  font-size: 28upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(10, 8, 25, 1);
  line-height: 56upx;
  text-align: center;
}
.show {
  opacity: 1;
}

.coupon_info {
  font-size: 20upx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 300;
  color: #f95a4b;
  margin-right: 10upx;
  display: flex;
  align-items: flex-end;
}
.addtolive {
  width: 120upx;
  height: 40upx;
  border-radius: 10upx;
  background-color: #f03752;
  z-index: 14;
  text-align: center;
  font-size: 28upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 40upx;
  padding: 0;
}
</style>